<template>
  <div class="box"  style="width: 800px ;margin: 0 auto">
    <div class="box" style="height: 50px; margin: 0 auto ;font-family: '楷体'; text-align: center">
      <h1 > <span class="el-icon-edit" >&nbsp&nbsp</span>金</span>&nbsp额&nbsp消&nbsp费（包含次卡的消费）</h1>
    </div>
    <hr>
    <el-form ref="form" :model="chargeDto" label-width="100px">
       <el-form-item label="卡号" style="width: 600px ;" >
        <el-input v-model=" chargeDto.cardid"  placeholder="输入卡号"></el-input>
      </el-form-item>
 
 
      <el-form-item label="客户编号" style="width: 600px ;" >
        <el-input v-model=" chargeDto.customerid"  placeholder="输入编号"></el-input>
      </el-form-item>

    <el-form-item label="消费金额" style="width: 600px ;">
      <el-input v-model="chargeDto.money"></el-input>
    </el-form-item>


  <el-form-item label="消费次卡" style="width: 600px ;">
      <el-input v-model="chargeDto.numcard"></el-input>
    </el-form-item>


     
      <el-form-item  label-width="200px">
        <el-button style="width: 100px" type="primary" @click="chargeMoney">确认修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

 
    <div class="box1" style="height: 50px; margin: 0 auto ;font-family: '楷体'; text-align: center; margin-top: 50px" >
      <h1 > <span class="el-icon-edit" >&nbsp&nbsp</span>金&nbsp额&nbsp充&nbsp值（包含次卡的充值）</h1>
    </div>
    <hr>
    <el-form ref="form" :model="addDto" label-width="100px">
      <!--    <el-form-item label="客户姓名" style="width: 600px ;" >-->
      <!--      <el-input v-model="form.name"></el-input>-->
      <!--    </el-form-item>-->
        <el-form-item label="客户编号" style="width: 600px ;" >
        <el-input v-model=" addDto.customerid"></el-input>
      </el-form-item>  
           <el-form-item label="卡号" style="width: 600px ;" >
        <el-input v-model=" addDto.cardid"  placeholder="输入卡号"></el-input>
      </el-form-item>
      <el-form-item label="充值金额" style="width: 600px ;">
        <el-input v-model=" addDto.money"></el-input>
      </el-form-item>
 
  <el-form-item label="充值次卡" style="width: 600px ;">
      <el-input v-model="addDto.numcard"></el-input>
    </el-form-item>


      <el-form-item  label-width="200px">
        <el-button style="width: 100px" type="primary" @click="addMoney">确认修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>


  <!-- <div class="box1" style="height: 50px; margin: 0 auto ;font-family: '楷体'; text-align: center; margin-top: 50px" >
      <h1 > <span class="el-icon-edit" >&nbsp&nbsp</span>次&nbsp卡&nbsp充&nbsp值</h1>
    </div>
    <hr>
    <el-form ref="form" :model="addDto" label-width="100px">
 
       <el-form-item label="客户编号" style="width: 600px" >
        <el-input v-model=" addDto.customer" placeholder="输入客户编号"></el-input>
      </el-form-item> 
      <el-form-item label="充值次卡数" style="width: 600px ;">
        <el-input v-model=" addDto.numcard"></el-input>
 
      </el-form-item>

      <el-form-item  label-width="200px">
        <el-button style="width: 100px" type="primary" @click="addMoney">确认修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form> -->


<!-- 
 <div class="box" style="height: 50px; margin: 0 auto ;font-family: '楷体'; text-align: center">
      <h1 > <span class="el-icon-edit" >&nbsp&nbsp</span>次</span>&nbsp卡&nbsp消&nbsp费</h1>
    </div>
    <hr>
    <el-form ref="form" :model="chargeDto" label-width="100px">
      <el-form-item label="客户编号" style="width: 600px ;" >
        <el-input v-model=" chargeDto.customerid"  placeholder="输入编号"></el-input>
      </el-form-item>
    
      <el-form-item label="消费次卡数" style="width: 600px ;">
        <el-input v-model=" chargeDto.numcard"></el-input>
      </el-form-item>

      <el-form-item  label-width="200px">
        <el-button style="width: 100px" type="primary" @click="chargeMoney">确认修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form> -->



 <div class="box1" style="height: 50px; margin: 0 auto ;font-family: '楷体'; text-align: center; margin-top: 50px" >
      <h1 > <span class="el-icon-edit" >&nbsp&nbsp</span>新&nbsp增&nbsp折&nbsp卡</h1>
    </div>
    <hr>
    <el-form ref="form" :model="addCard" label-width="100px">
      <!--    <el-form-item label="客户姓名" style="width: 600px ;" >-->
      <!--      <el-input v-model="form.name"></el-input>-->
      <!--    </el-form-item>-->
      <el-form-item label="客户id" style="width: 600px ;" >
        <el-input v-model="addCard.customerid"></el-input>
      </el-form-item>
   

      <el-form-item label="新增卡号" style="width: 700px ;">
        <el-input v-model="addCard.cardid"></el-input>
<!--        <h1>300</h1>-->
      </el-form-item>

      <el-form-item label="新增卡号金额" style="width: 600px ;">
        <el-input v-model="addCard.money"></el-input>
<!--        <h1>300</h1>-->
      </el-form-item>

<el-form-item label="卡种类">
    <el-select v-model="addCard.type" placeholder="请选择卡种类">
      <el-option label="无折扣" value="1"></el-option>
      <el-option label="8折" value="2"></el-option>
      <el-option label="7折" value="3"></el-option>
    </el-select>
    </el-form-item>

 

      <el-form-item  label-width="200px">
        <el-button style="width: 100px" type="primary" @click="addMemCard">确认增加</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import customer from '../../../api/customer'
  export default {
    data() {
      return {
        chargeDto:{
          customerid : '',
          name : '',
          money : '',
          numcard : ''
        },
        addDto:{
          id : '',
          name : '',
          money : '',
          numcard : ''
        },
        addCard:{
          cardid : '',
          money : '',
          customerid : '',
          type : ''
        },
      };
    },
    created() {

    },
    beforeCreate() {

    },
    methods: {
    // sarchCustomer(name){
    //   customer.searchCustomer(this.name).then(response=>{
    //     console.log(response);
    //     this.list = response.data;
    //   })
    // },
addMemCard(){
  this.$confirm('此操作将永久修改该用户金额, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.addCard)
        customer.addMemCard(this.addCard).then(response=>{
          this.addCard={}
        });
        this.$message({
          type: 'success',
          message: '金额修改成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
      },



    chargeMoney(){
      this.$confirm('此操作将永久修改该用户金额, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        customer.chargeMoney(this.chargeDto).then(response=>{
          this.chargeDto={}
        });
        this.$message({
          type: 'success',
          message: '金额修改成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
      },
      addMoney(){
        this.$confirm('此操作将永久增加该用户金额, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          customer.addMoney(this.addDto).then(response=>{
            this.addDto= {}
          });
          this.$message({
            type: 'success',
            message: '金额充值成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消充值'
          });
        });
      },
    }
  }
</script>

<style scoped>

</style>

